<!-- 基本组织 -->
<template>
  <div>
    <van-nav-bar
      title="组织详情"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- title -->
    <div class="title border-bottom-one-rem">
      <span class="I"></span>
      <div>{{pageData.organInfo.organname}}</div>
    </div>
    <!-- 照片 -->
    <div v-if="pageData.organuserinfo.length>0" class="headerImg border-bottom-one-rem">
      <!-- 上方第一个 -->
      <div class="topOneheader">
        <div class="headerCard">
          <div class="imgDiv">
            <img :src="organuserinfoFirst.photourl" alt=""  @error="imgonerror(organuserinfoFirst)">
          </div>
          <div class="nickname">{{organuserinfoFirst.nickname}}</div>
          <div class="rolename">
            {{organuserinfoFirst.duty}}
          </div>
        </div>
      </div>
      <!-- 下方多个 -->
      <div class="headerCard" v-for="(item,i) in pageData.organuserinfo" :key="i">
        <div class="imgDiv">
          <img :src="item.photourl" alt="" @error="imgonerror(item)">
        </div>
        <div class="nickname">{{item.nickname}}</div>
        <div class="rolename">
          {{item.duty}}
        </div>
      </div>
    </div>
    <!-- 党员信息 -->
    <div class="info border-bottom-one-rem">
      <p class="little-title">党员信息:</p>
      <div class="fiveCard">
        <div class="infoCard" v-for="(item,i) in fiveCard" :key="i">
          <img :src="item.src" alt="">
          <div class="infoNum">{{pageData[item.feilds]}}</div>
          <div class="infoTxt">{{item.txt}}</div>
        </div>
      </div>
      <div class="twoProcess">
        <div class="imgShadow"><img src="../../assets/personParty.png" alt=""></div>
        <div class="redProcessBox">
          <div class="redProcess">
            预备党员占比: &nbsp;
            <process :styles="{width:((pageData.ybaccuracynum||0)*1.6)+'px'}"></process>
            <span>{{(pageData.ybaccuracynum||0)+'%'}}</span>
          </div>
          <div class="redProcess">
            正式党员占比: &nbsp;
            <process :styles="{width:((pageData.zsaccuracynum||0)*1.6)+'px'}"></process>
            <span>{{(pageData.zsaccuracynum||0)+'%'}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 三个环形进度条 -->
    <div class="circleProcess border-bottom-one-rem" v-for="(item, i) in circleProcessArrayData" :key="i">
      <p class="little-title">{{item.title}}</p>
      <div class="circleCard">
        <div class="vanCircle">
          <van-circle v-model="item.currentRate"
          size="70"
          :rate="item.rate"
          color="#BB383E"
          :text="item.rate+'%'"
          :stroke-width="60"
          layer-color="#F4F4F4" />
        </div>
        <div class="CardText">
          <p>{{currentYear}}年度<span v-if="i===0">（{{item.shouldTxt+': '+item.should}}）</span></p>
          <div class="CardText-bot">
            <div>
              <div style="font-size:17px;color:#C56100">{{item.actual}}</div>
              <div>{{item.actualTxt}}</div>
            </div>
            <div v-if="i!==0">
              <div style="font-size:17px;color:#18A8F3">{{item.should}}</div>
              <div>{{item.shouldTxt}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import person1 from '../../assets/person1.png'
import person2 from '../../assets/person2.png'
import person3 from '../../assets/person3.png'
import process from '../components/process'
import { getUserInfo } from '@/api/index.js'
import { appendFeild } from "@/untils/untils.js";
export default {
  components: { process },
  data() {
    return {
      currentRate:0,
      currentRate0:0,
      currentRate1:0,
      currentYear:'2020',
      defaultMan:'http://71wx.baosteel.com/party/images/head/user/1/120.jpg',
      defaultWomen:'http://71wx.baosteel.com/party/images/head/user/2/120.jpg',
      organuserinfoFirst:{},
        data:{
          "serviceName":"PersonalInfo",
          "methodName":"getOrganOne",
          organcode:'',
          usercode:'',
          roleid:''
        },
        pageData:{organInfo:{},organuserinfo:[]},
        circleProcessArrayData:[],
        fiveCard:[
          {feilds:'sqrcount',txt:'申请人(人)',src:person2},
          {feilds:'jjfzcount',txt:'积极分子(人)',src:person3},
          {feilds:'fzdxcount',txt:'发展对象(人)',src:person2},
          {feilds:'ybdycount',txt:'预备党员(人)',src:person1},
          {feilds:'zsdycount',txt:'正式党员(人)',src:person3}
        ]
    };
  },
  created(){
    this.PersonalInfo()
    this.currentYear = new Date().getFullYear()
  },
  methods: {
    PersonalInfo(){
      this.data.organcode = this.$route.params.organcode
      this.data.roleid = localStorage.getItem('roleId')
      this.data.usercode = localStorage.getItem('usercode')
      getUserInfo(this.data).then(res => {
        if (res.status == 1) {
          this.pageData = res.data
          this.organuserinfoFirst = this.pageData.organuserinfo.splice(0,1)[0]
          this.circleProcessArrayData = appendFeild(this.circleProcessArray(),'currentRate',0) 
        }
      })
    },
    imgonerror(item){ // 图片加载失败更改图片
      var img=event.srcElement; 
      img.src= item.sexid == 1 ? this.defaultMan : this.defaultWomen
      img.onerror=null; //控制不要一直跳动 
    },
    circleProcessArray() {
      let pageData = this.pageData
      return [
        {
          rate: pageData.amountaccuracynum-0||0,
          title:'月度党费缴纳:',
          shouldTxt:'应缴',
          actualTxt:'实际缴纳金额(元)',
          should:pageData.oughtamount||0,
          actual:pageData.amount||0
        },
        {
          title:'按期换届：',
          shouldTxt:'应换届数',
          actualTxt:'实际换届数',
          rate: pageData.organchangeaccuracynum-0||0,
          should:pageData.oughtchanges||0,
          actual:pageData.lastchanges||0
        },
        {
          title:'三会一课开展进度：',
          shouldTxt:'应开展数量',
          actualTxt:'实际开展数量',
          rate: pageData.organlessonaccuracynum-0||0,
          should:pageData.organLessonShouldCount||0,
          actual:pageData.organLessonCount||0
        }
      ]
    }
  }
}
</script>
<style scoped>
.topOneheader{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vanCircle{
  padding: 15px 0 0 15px;
  display: inline-block;
  vertical-align: middle;
}
.CardText>p{
  font-size: 10px;
}
.CardText-bot>div{
  flex: 1;
  color: #868686;
  font-size: 10px;
  line-height: 2em;
}
.CardText-bot{
  display: flex;
}
.CardText{
  padding-top: 15px;
  margin-left: 30px;
  width: 60%;
  float: right;
  display: inline-block;
}
.circleCard{
  height: 115px;
}
.circleProcess{
  padding: 0 17px;
}
.redProcess span{
  color: #BB383E;
  margin-left: 10px;
}
.redProcess{
  display: flex;
  align-items: center;
}
.redProcessBox{
  height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #9F9F9F;
  font-size: 10px;
  margin-left: 12px;
}
.imgShadow{
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #F2F2F2;
  box-shadow:0px 2px 3px 0px rgba(193,193,193,0.48);
}
.twoProcess img{
  width: 24px;
  height: 24px  ;
}
.twoProcess{
  height: 60px;
  display: flex;
  align-items: center;
}
.infoTxt{
  /* color: #9F9F9F; */
  font-weight: 600;
  font-size: 10px;
}
.infoNum{
  color: #BB383E;
  line-height: 1.5em;
  font-size: 14px;
}
.fiveCard img{
  width: 24px;
  height: 24px;
}
.fiveCard{
  padding-bottom: 14px;
  display: flex;
  text-align: center;
  justify-content: space-between;
}
.little-title{
  font-size: 12px;
}
.info{
  padding: 0 17px;
}
.nickname{
  font-weight: 600;
  font-size: 12px;
  margin: 7px 0 5px 0;
}
.rolename{
  color: #999A9A;
  font-size: 10px;
}
.headerCard{
  width: 24%;
  min-height: 136px;
  margin: 7px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title{
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 16px;
  font-size: 14px;
  border-bottom: 5px solid #F4F4F4;
  
}
.title>div{
  width: 66rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.I{
  display: inline-block;
  margin-right: 8px;
  width: 0.4rem;
  height: 14px;
  background: #BB383E;
}
.headerImg>div img{
  height: 100%;
}
.headerImg .imgDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:0px 10px 9px 1px rgba(150,150,150,0.65);
  border-radius:5px;
  height: 90px;
  overflow: hidden;
}
.headerImg{
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  /* align-items: center; */
  justify-content: space-between;
}
</style>